/// <reference types="vitest" />
import { defineConfig } from "vite"
import UnoCSS from "unocss/vite"
import { presetAttributify, presetIcons, presetUno } from "unocss"
import vue from "@vitejs/plugin-vue"
import AutoImport from "unplugin-auto-import/vite"
import path from "node:path"
import jsx from "@vitejs/plugin-vue-jsx"
import { viteMockServe } from "vite-plugin-mock"
// 自定义css类 ml
const marginLeft = Array.from({ length: 50 }, (_, i) => "ml" + i * 3)
const safelist = [...marginLeft]

export default defineConfig({
  plugins: [
    viteMockServe(),
    vue(),
    jsx(),
    UnoCSS({
      safelist,
      // 还可以自己自定义css
      // presetUno 默认预设
      // presetAttributify 可以将css类写成属性
      // prestIcons 图标自定义
      // shortcuts 自定义简写
      // rules:[['custom-rule', { color: 'red' }]] 自定义规则
      shortcuts: {
        // 自定义简写
        btn: "px-2 py-2 font-semibold rounded-lg shadow-md bg-blue-3 text-#fff"
      },
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons({
          collections: {
            // 自己加集合 例如我自定义集合命名空间 ab 然后 一个图标为circle 使用 i-ab-circle
            ab: {
              circle: `<svg width="50" height="50" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" /></svg>`
            }
          },
          extraProperties: {
            display: "inline-flex",
            width: "2em",
            height: "2em",
            "vertical-align": "middle"
          }, // 自定义图标css属性，所有图标都会应用 例如display width height
          customizations: {
            // iconCustomizer(collection, icon, props) {
            //   if (collection == "ep") {
            //     // 对于单集合图标可以在这里定义
            //     props.width = "4em"
            //     props.height = "4em"
            //   }
            // }
          }
        })
      ]
    }),
    AutoImport({
      imports: ["vue", "vue-router", "pinia"],
      eslintrc: { enabled: false } // 这个只需要生成一次就好，生成完后关闭
    })
  ],
  resolve: {
    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }]
  },
  test: {
    globals: true, // 开启全局API
    environment: "happy-dom", // 烈类似浏览器的node环境
    transformMode: {
      // 扩展转换 web ssr
      web: [/.tsx$/]
    }
  }
})
